<template>
  <el-dialog
    title="新增模板"
    :visible="showDeap"
    width="40%"
    :before-close="hClose"
  >
    <el-form :model="formData" :rules="rules" label-width="80px">
      <el-form-item label="模板类型">
        <el-select placeholder="请选择模板类型" style=" width: 100%">
          <el-option
            v-for="item in options"
            :key="item.value"
            v-model="formData.options"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="运送类型">

        <el-select placeholder="请选择运送类型" style=" width: 100%">
          <el-option
            v-for="item in option"
            :key="item.value"
            v-model="formData.option"
            :label="item.label"
            :value="item.value"
          />
        </el-select>

      </el-form-item>

      <el-form-item label="关联城市">
        <span>全国</span>
      </el-form-item>

      <el-form-item prop="name" class="input" label="首重价格">
        <el-input v-model="formData.name" placeholder="请输入首重价格" />
        <div class="yuan">元</div>
      </el-form-item>

      <el-form-item prop="pic" class="input" label="续重价格">
        <el-input v-model="formData.pic" placeholder="请输入续重价格" />
        <div class="yuan">元</div>
      </el-form-item>

      <el-form-item prop="qin" label="轻抛系数">
        <el-input v-model="formData.qin" placeholder="请输入轻抛系数" />
      </el-form-item>

      <el-form-item size="large" class="but">
        <el-button type="primary">确认</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
export default {
  props: {
    showDeap: {
      type: Boolean
    }
  },
  data() {
    return {
      value: '',
      options: [{
        value: '选项1',
        label: '同城寄'
      }, {
        value: '选项2',
        label: '省内寄'
      }, {
        value: '选项4',
        label: '经济区互寄'
      }, {
        value: '选项5',
        label: '跨省'
      }],
      option: [{
        value: '选项1',
        label: '普快'
      }],
      formData: {
        name: '',
        pic: '',
        option: '',
        options: '',
        qin: ''
      },
      rules: {
        name: [{
          required: true, message: '不能为空', trigger: 'blur'
        }]
      }
    }
  },
  methods: {
    hClose() {
      this.$emit('update:showDeap', false)
    }
  }
}
</script>

<style lang="scss" scoped>
 .but {
  width: 80%;
  margin:30px , auto;
  text-align: center;
 }
 .input{
  position: relative;

  .yuan{
    position: absolute;
    right: 0;
    top: 0;
    width: 30px;
    height: 100%;
  }
 }
</style>

